<template>
    <div class="page-demo-table-base">
        <div class="main-page-content">
            <ContentHeader title="这里是抽象语法树辅助度量页面" explain="在本页面上传您的源代码，将为您反馈度量结果">

            </ContentHeader>

            <div class="page-content">
                <span style="font-size: large;">上传您的源代码</span>
                <a-divider />
                <a-upload name="file" :multiple="false" :customRequest="uploadJavaFile" :showUploadList="false">
                    <a-button> <a-icon type="upload" /> 选择要上传的代码文件</a-button>
                </a-upload>
                <div v-if="!(JSON.stringify(astResult) == '{}')" style="margin-top: 15px;">您的代码度量结果已经生成，请下滑查看。</div>

            </div>
            <div v-if="!(JSON.stringify(astResult) == '{}')" class="page-content"
                style="margin-top: 0px;position: relative;">
                <span style="font-size: large;">已上传代码的内容</span>
                <a-divider />
                <span>{{ astResult.className }}类中有{{ astResult.classMethodPros.length }}个方法：</span>
                <a-card v-for="method in astResult.classMethodPros" :loading="false" :bordered="false"
                    :title="method.methodName" style="margin:20px;">
                    <a-form-model layout="vertical">
                        <a-row class="form-row" :gutter="16" style="margin-bottom: 5px;margin-top: 0px;">
                            <a-col :lg="18" :md="12" :sm="24">
                                <div style="display: inline-block;width: 300px;">方法参数：</div>
                                <a-button @click="clickCheck()" style="width:350px;margin-bottom: 2px;">
                                    <span v-for="prname, index in method.parameterName">{{ prname }}<span
                                            v-if="index != method.parameterName.length - 1">,&nbsp;</span></span>
                                </a-button>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :lg="18" :md="12" :sm="24">
                                <div style="display: inline-block;width: 300px;">调用其他方法： &nbsp;</div>
                                <a-button @click="clickCheck()" style="width:350px;margin-bottom: 2px;">
                                    <span>{{ method.callMethod }}</span>
                                </a-button>
                            </a-col>
                        </a-row>
                    </a-form-model>
                </a-card>

            </div>

            <div v-if="!(JSON.stringify(astResult) == '{}')" class="page-content"
                style="margin-top: 0px;position: relative;">
                <span style="font-size: large;">抽象语法树辅助度量结果</span>
                <a-divider />
                <a-card class="form-card" :loading="false" :bordered="false">
                    <a-table :columns="columns" :dataSource="data" :pagination="false" :loading="false">
                    </a-table>
                </a-card>
                <div style="height:46px"></div>
            </div>
            <ContentFooter v-if="!(JSON.stringify(astResult) == '{}')" explain="本页通过分析用户上传的代码文件，计算类的响应数量和类缺乏内聚性。">
                <div class="helpnote">
                    <div>
                        1. 类的响应数量RFC（Response for a Class）：<br />
                        计算一个类的对象对接受的消息进行响应的方法集合的数目（计算一个类中所有方法以及被该类中方法调用的其他类的方法的总数）。<br />
                        RFC是对类复杂性以及类之间耦合度的一种度量。<br />
                    </div>
                    <div>
                        RFC的意义：1. 反映了类本身定义的方法数；2. 反映了一个类与其他类之间的交互性（耦合性）（结：RFC体现了类的复杂性）<br />
                    </div>
                    <div>
                        2. 类缺乏内聚性LCOM（Lack of Cohesion）：<br />
                        通过类中的属性与方法来衡量类中方法之间的相关性。<br />
                        高内聚要求一个模块承担一个单一职责；一个类是高内聚则要求类中不同方法在相同属性集合上完成单一职责的操作。<br />
                        缺乏内聚性考察类的内聚性。<br />
                    </div>
                    <div>
                        LCOM的意义：1. 缺乏内聚度反映了类的内聚程度,实际上也就反映了类设计的封装性; <br />
                    </div>
                </div>
            </ContentFooter>
            <ContentFooter v-else activeKey="1" explain="本页通过分析用户上传的代码文件，计算类的响应数量和类缺乏内聚性。">
                <div class="helpnote">
                    <div>
                        1. 类的响应数量RFC（Response for a Class）：<br />
                        计算一个类的对象对接受的消息进行响应的方法集合的数目（计算一个类中所有方法以及被该类中方法调用的其他类的方法的总数）。<br />
                        RFC是对类复杂性以及类之间耦合度的一种度量。<br />
                    </div>
                    <div>
                        RFC的意义：1. 反映了类本身定义的方法数；2. 反映了一个类与其他类之间的交互性（耦合性）（结：RFC体现了类的复杂性）<br />
                    </div>
                    <div>
                        2. 类缺乏内聚性LCOM（Lack of Cohesion）：<br />
                        通过类中的属性与方法来衡量类中方法之间的相关性。<br />
                        高内聚要求一个模块承担一个单一职责；一个类是高内聚则要求类中不同方法在相同属性集合上完成单一职责的操作。<br />
                        缺乏内聚性考察类的内聚性。<br />
                    </div>
                    <div>
                        LCOM的意义：1. 缺乏内聚度反映了类的内聚程度,实际上也就反映了类设计的封装性; <br />
                    </div>
                </div>
            </ContentFooter>
        </div>
    </div>
</template>
<script>
import ContentHeader from "@/components/content_header/content_header";
import ContentFooter from "@/components/content_footer/content_footer";
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios
let j = 0;
export default {
    components: {
        ContentHeader,
        ContentFooter
    },
    data() {
        return {
            headers: {
                authorization: 'authorization-text',
            },
            astResult: {},
            data: [],
            "columns": [
                {
                    title: '类名',
                    dataIndex: 'className',
                    key: 'className',
                    align: 'center',
                    width: '33%',
                    scopedSlots: { customRender: 'className' }
                },
                {
                    title: '类响应数量RFC',
                    dataIndex: 'rfc',
                    key: 'rfc',
                    align: 'center',
                    width: '33%',
                    scopedSlots: { customRender: 'rfc' }
                },
                {
                    title: '类缺乏内聚性LCOM',
                    dataIndex: 'lcom',
                    key: 'lcom',
                    align: 'center',
                    scopedSlots: { customRender: 'lcom' }
                }
            ],
        };
    },
    methods: {
        uploadJavaFile(data) {
            this.getAstResult(data)
        },
        getAstResult(data) {
            console.log("上传代码文件，发送HTTP请求……", data.file)
            let formdata = new FormData()
            formdata.append("file", data.file)
            this.$http.post('http://localhost:8085/oommetric/astmetric', formdata, {
                headers: {
                    'Content-Type': 'multipart/form-data; boundary = ' + new Date().getTime()
                }
            }).then(res => {
                console.log("获取ast度量结果，返回结果为：", res.data)
                this.astResult = res.data.data,
                    this.data.push({
                        key: (j).toString(),
                        className: this.astResult.className,
                        rfc: this.astResult.rfc,
                        lcom: this.astResult.lcom
                    })
                j = j + 1
            }).catch(error => {
                console.log(error)
            })
        },
        clickCheck() {
            console.log("啊！我被点击了！")
        }
    },
};
</script>
<style lang="less" scoped>
@import "./data_v.less";
</style>
  